<div ng-controller="dashboard">

    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="widget-simple-chart text-right card-box">
                <div class="circliful-chart" data-dimension="90" data-text="35%" data-width="5" data-fontsize="14" data-percent="35" data-fgcolor="#5fbeaa" data-bgcolor="#ebeff2"></div>
                <h3 class="text-success counter">2562</h3>
                <p class="text-muted text-nowrap">Total Account</p>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="widget-simple-chart text-right card-box">
                <div class="circliful-chart" data-dimension="90" data-text="75%" data-width="5" data-fontsize="14" data-percent="75" data-fgcolor="#3bafda" data-bgcolor="#ebeff2"></div>
                <h3 class="text-primary counter">5685</h3>
                <p class="text-muted text-nowrap">Total Device</p>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="widget-simple-chart text-right card-box">
                <div class="circliful-chart" data-dimension="90" data-text="58%" data-width="5" data-fontsize="14" data-percent="58" data-fgcolor="#f76397" data-bgcolor="#ebeff2"></div>
                <h3 class="text-pink"> <span class="counter">12480</span></h3>
                <p class="text-muted text-nowrap">Daily Binding</p>
            </div>
        </div>

        <div class="col-sm-6 col-lg-3">
            <div class="widget-simple-chart text-right card-box">
                <div class="circliful-chart" data-dimension="90" data-text="49%" data-width="5" data-fontsize="14" data-percent="49" data-fgcolor="#98a6ad" data-bgcolor="#ebeff2"></div>
                <h3 class="text-inverse counter">62</h3>
                <p class="text-muted text-nowrap">Pending Orders</p>
            </div>
        </div>
    </div>
    <!-- end row -->


    <div class="row">
        <div class="col-lg-8">
            <div class="card-box">
                <h4 class="text-dark  header-title m-t-0">Latest 10 Orders</h4>
                <p class="text-muted m-b-25 font-13">
                    updated at 2018-12-12 09:22:12
                </p>

                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Order No</th>
                            <th>Buy Time</th>
                            <th>Pay Time</th>
                            <th>Order Status</th>
                            <th>Customer</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>26/04/2016</td>
                            <td><span class="label label-info">Released</span></td>
                            <td>Coderthemes</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>26/04/2016</td>
                            <td><span class="label label-success">Released</span></td>
                            <td>Minton admin</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>1112222223333334</td>
                            <td>01/05/2016</td>
                            <td>10/05/2016</td>
                            <td><span class="label label-pink">Pending</span></td>
                            <td>Coderthemes</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-purple">Work in Progress</span>
                            </td>
                            <td>Minton admin</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-warning">Coming soon</span></td>
                            <td>Coderthemes</td>
                        </tr>

                        <tr>
                            <td>6</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-primary">Coming soon</span></td>
                            <td>Minton admin</td>
                        </tr>

                        <tr>
                            <td>5</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-warning">Coming soon</span></td>
                            <td>Coderthemes</td>
                        </tr>

                        <tr>
                            <td>6</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-primary">Coming soon</span></td>
                            <td>Minton admin</td>
                        </tr>

                        <tr>
                            <td>5</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-warning">Coming soon</span></td>
                            <td>Coderthemes</td>
                        </tr>

                        <tr>
                            <td>6</td>
                            <td>1112222223333334</td>
                            <td>01/01/2016</td>
                            <td>31/05/2016</td>
                            <td><span class="label label-primary">Coming soon</span></td>
                            <td>Minton admin</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card-box">
                <h4 class="text-dark header-title m-t-0 m-b-30">Daily Sales Report</h4>

                <div class="widget-chart text-center">
                    <div id="sparkline3"></div>
                    <ul class="list-inline m-t-15">
                        <li>
                            <h5 class="text-muted m-t-20">Target</h5>
                            <h4 class="m-b-0">$1000</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last week</h5>
                            <h4 class="m-b-0">$523</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last Month</h5>
                            <h4 class="m-b-0">$965</h4>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card-box">
                <h4 class="text-dark header-title m-t-0 m-b-30">Weekly Sales Report</h4>

                <div class="widget-chart text-center">
                    <div id="sparkline3"></div>
                    <ul class="list-inline m-t-15">
                        <li>
                            <h5 class="text-muted m-t-20">Target</h5>
                            <h4 class="m-b-0">$1000</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last week</h5>
                            <h4 class="m-b-0">$523</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last Month</h5>
                            <h4 class="m-b-0">$965</h4>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card-box">
                <h4 class="text-dark header-title m-t-0 m-b-30">Month Sales Report</h4>

                <div class="widget-chart text-center">
                    <div id="sparkline3"></div>
                    <ul class="list-inline m-t-15">
                        <li>
                            <h5 class="text-muted m-t-20">Target</h5>
                            <h4 class="m-b-0">$1000</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last week</h5>
                            <h4 class="m-b-0">$523</h4>
                        </li>
                        <li>
                            <h5 class="text-muted m-t-20">Last Month</h5>
                            <h4 class="m-b-0">$965</h4>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
    </div>
    <!-- end row -->

</div>
